<template>
  <div class="login-container">
    <div class="login-bg"></div>
    <ElCard class="login-card">
      <div slot="header" class="login-header">
        <h2 class="login-title">流程中心</h2>
      </div>
      <ElForm
        ref="loginFormRef"
        :model="state.loginForm"
        :rules="state.loginRules"
        class="login-form"
        @submit.prevent="handleLogin">
        <ElFormItem prop="username">
          <ElInput
            v-model:modelValue="state.loginForm.username"
            placeholder="请输入用户名"
            clearable=""
            prefix-icon="User"></ElInput
        ></ElFormItem>
        <ElFormItem prop="password">
          <ElInput
            v-model:modelValue="state.loginForm.password"
            :type="state.showPassword ? 'text' : 'password'"
            placeholder="请输入密码"
            prefix-icon="Lock">
            <template #suffix="scope_65amd47n8">
              <VtjIconVisible
                v-show="!state.showPassword"
                @click="
                  (...args: any[]) => click_2uamc4kpb({ scope_6samdhw53 }, args)
                "></VtjIconVisible>
              <VtjIconInvisible
                v-show="state.showPassword"
                @click="
                  (...args: any[]) => click_2uamc4kpb({ scope_6samdhw53 }, args)
                "></VtjIconInvisible> </template></ElInput
        ></ElFormItem>
        <div class="form-actions">
          <ElCheckbox
            v-model:modelValue="state.loginForm.remember"
            size="small">
            记住密码</ElCheckbox
          >
          <ElLink type="primary" size="small" @click="handleForgotPassword">
            忘记密码?</ElLink
          >
        </div>
        <ElFormItem>
          <ElButton
            type="primary"
            class="login-btn"
            :loading="state.isLoading"
            @click="handleLogin">
            登录</ElButton
          ></ElFormItem
        >
        <div class="register-link">
          <span> 还没有账号?</span>
          <ElLink type="primary" @click="handleRegister"> 立即注册</ElLink>
        </div></ElForm
      ></ElCard
    >
  </div>
</template>
<script lang="ts">
  // @ts-nocheck
  import { defineComponent, reactive } from 'vue';
  import {
    ElCard,
    ElForm,
    ElFormItem,
    ElInput,
    ElCheckbox,
    ElLink,
    ElButton,
    ElMessage
  } from 'element-plus';
  import { VtjIconVisible, VtjIconInvisible } from '@vtj/icons';
  import { useProvider } from '@vtj/renderer';
  export default defineComponent({
    name: 'Login',
    components: {
      ElCard,
      ElForm,
      ElFormItem,
      ElInput,
      VtjIconVisible,
      VtjIconInvisible,
      ElCheckbox,
      ElLink,
      ElButton
    },
    setup(props) {
      const provider = useProvider({ id: 'bam3rl55', version: '1759050856908' });
      const state = reactive({
        loginForm: { username: '', password: '', remember: false },
        loginRules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
          ]
        },
        showPassword: false,
        isLoading: false
      });
      return { state, props, provider, ElMessage };
    },
    methods: {
      async postAuthLogin(...args) {
        // DataSource: eyJ0eXBlIjoiYXBpIiwicmVmIjoiM2RhbTQ5eXAzIiwibmFtZSI6InBvc3RBdXRoTG9naW4iLCJsYWJlbCI6IueZu+W9lSIsInRyYW5zZm9ybSI6eyJ0eXBlIjoiSlNGdW5jdGlvbiIsInZhbHVlIjoiKHJlcykgPT4ge1xuICAgIHJldHVybiByZXM7XG59In0sInRlc3QiOnsidHlwZSI6IkpTRnVuY3Rpb24iLCJ2YWx1ZSI6IigpID0+IHRoaXMucnVuQXBpKHtcbiAgICAvKiDlnKjov5nph4zlj6/ovpPlhaXmjqXlj6Plj4LmlbAgICovXG59KSJ9LCJtb2NrVGVtcGxhdGUiOnsidHlwZSI6IkpTRnVuY3Rpb24ifX0=
        return await this.provider.apis['3dam49yp3']
          .apply(this, args)
          .then((res) => {
            return res;
          });
      },
      click_2uamc4kpb({ scope_6samdhw53 }, args) {
        return (() => {
          this.state.showPassword = !this.state.showPassword;
        }).apply(this, args);
      },
      async handleLogin() {
        try {
          // 验证表单
          await this.$refs.loginFormRef.validate();
          this.state.isLoading = true;
          const { username, password } = this.state.loginForm;
          // 调用登录接口
          const res = await this.postAuthLogin({ username, password });
          if (res) {
            console.log(res);
            ElMessage.success('登录成功');
            // 登录方法
            this.$access.login({
              token: 'Bearer ' + res.data.token,
              permissions: {
                '6amjvjpy': true,
                '2aqf1lnh': true,
                raqtkl42: true
              }
            });
            this.$router.push('/page/6amjvjpy');
          }
        } catch (error) {
          ElMessage.error('登录失败，请检查账号密码');
        } finally {
          this.state.isLoading = false;
        }
      },
      handleForgotPassword() {},
      handleRegister() {}
    }
  })
</script>
<style lang="css" scoped>
  .login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
  }

  .login-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #6e8efb, #a777e3);
    z-index: 1;
  }

  .login-card {
    width: 100%;
    max-width: 400px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: none;
    padding: 40px 30px;
    position: relative;
    z-index: 2;
    transition:
      transform 0.3s ease,
      box-shadow 0.3s ease;
  }

  .login-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
  }

  .login-header {
    text-align: center;
    margin-bottom: 30px;
  }

  .login-title {
    font-size: 24px;
    font-weight: 600;
    color: #1d2129;
    margin: 0 0 8px 0;
  }

  .login-desc {
    font-size: 14px;
    color: #86909c;
    margin: 0;
  }

  .login-form {
    width: 100%;
  }

  .el-form-item {
    margin-bottom: 20px;
  }

  .el-input {
    --el-input-height: 44px;
    border-radius: 8px;
  }

  .icon {
    color: #86909c;
    font-size: 18px;
  }

  .form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    font-size: 14px;
  }

  .el-checkbox__label {
    color: #4e5969;
  }

  .login-btn {
    width: 100%;
    height: 44px;
    font-size: 16px;
    border-radius: 8px;
    background-color: #2d8cf0;
    border-color: #2d8cf0;
    transition: all 0.3s ease;
  }

  .login-btn:hover,
  .login-btn:focus {
    background-color: #1d7ad9;
    border-color: #1d7ad9;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(45, 140, 240, 0.25);
  }

  .register-link {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: #4e5969;
  }

  .register-link .el-link {
    color: #2d8cf0;
    margin-left: 4px;
    transition: color 0.2s;
  }

  .register-link .el-link:hover {
    color: #1d7ad9;
  }

  @media (max-width: 480px) {
    .login-card {
      padding: 30px 20px;
    }
  }
</style>
